<template>
  <div id="app">
          <audio 
          muted='muted'
          
           reload="auto"
           :paused='ispaused' 
           
           ref='audio' 
           class="audio" 
           @timeupdate="timeupdate" 
           
           :src="`https://music.163.com/song/media/outer/url?id=${song}.mp3`" 
           
           ></audio>
     <div class="palybottom" v-if="songdetail && $route.meta.showPlayBar !== false&&song"> 
  
        <!-- <span>{{paused}}</span> -->
      <div  @click="$router.push(`/player/${songid}`)" :class="paused?'running songimg':'songimg'">

        <img v-if="songdetail" style="width:30px;height:30px;border-radius:30px;" :src="songdetail.picUrl" alt="">
     
      </div>

      <div v-if="songdetail"  class="songname">
      <div class="nametop">
          <span >{{songdetail.name}}</span>
        <!-- <strong v-if="creatordetail.length==0?false:true">{{creatordetail[0]}}</strong> -->

      </div>
<!-- 
      <div class="namebottom">
        <span>{{currentTime}}/{{totalTime}}</span>
      </div> -->

      

      </div>

      <div class="play">
        <div class="playfun" @click="changeplay">
          
         <span class="iconfont icon-bofang" v-show="!paused" ></span>
        <span class="iconfont icon-zanting" v-show="paused" ></span>
        </div>
       <span class="iconfont icon-liebiao">



       </span>
      </div>
      
     </div>
   
    <router-view
    @change-current-song='getsongsdetail'
    ></router-view>
  </div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios'
import {get } from './http/request'
import {mapState} from 'vuex'
export default {
  name: 'HomeView',
  components: {
  }
  ,
  data(){
    return {
      totalTime:null,
      currentTime:null,
      index:1,
      isplay:true,
      song:null,
      songdetail:null,
      creatordetail:null,
      ispaused:null,
    }
  },
  computed:{
    ...mapState(['curtime','paused','duration','ccur','songid'])
  },
  watch:{
  
    songid(Value){
     
    // 记录历史
    this.$store.commit('addhistory',Value);

      this.song=Value

       this.song=this.$store.state.songid

      let url=`/song/detail?ids=${this.song}`

         get(url).then(respnse=>{
  
          //  console.log(respnse);

           this.songdetail=respnse?.data?.songs[0]?.al

           this.creatordetail=respnse?.data?.songs[0]?.alia

          //  console.log(this.songdetail);

         }).catch(e=>{})
       
    
    }
    
    ,
    ccur:{

      
         handler(newValue){
              
           this.$refs.audio.currentTime=newValue
         }
        
    },
   paused:{
         
         handler(newValue){
              if(newValue==true){
                this.$nextTick(()=>{
                  this.$refs.audio.play()

                })
           
           

         }
         else{
            
              this.$nextTick(()=>{
                  this.$refs.audio.pause()

                })
           
            
         }
           
         },
         immediate:true
   },
    index(){
      console.log('index change');
    }
    ,
       song(newValue){
         let url=`http://localhost:3000/song/detail?ids=${this.songid}`
         axios.get(url).then(respnse=>{

           console.log(respnse);
           

           
           this.songdetail=respnse.data.songs[0]?.al

           this.creatordetail=respnse.data.songs[0]?.alia

          //  console.log(this.songdetail);

           this.$store.commit('changesongid',newValue);    
           
         

         }).catch(e=>{})
         
       }
       ,
       isplay(newValue){

        //  console.log('isplay change',newValue);

         if(newValue==true){
           this.$refs.audio.play()
           this.$store.commit('changepaused',true)

         }
         else{
            this.$refs.audio.pause()
            this.$store.commit('changepaused',false)
         }

       }
  },
  methods:{
    getsongsdetail(detail){
      // console.log('songdetail',detail);
      this.song=detail.id;
      this.songdetail=detail

    },
    timeupdate(e){

              this.$store.commit('changeCur',this.$refs.audio.currentTime)

              
            let current =this.$refs.audio.currentTime;

            this.currentTime=`${current/60>10?parseInt(current/60):'0'+parseInt(current/60)}:${current%60>10?parseInt(current%60):'0'+parseInt(current%60)}`

            let total=this.$refs.audio.duration;

            this.totalTime=`${total/60>10?parseInt(total/60):'0'+parseInt(total/60)}:${total%60>10?parseInt(total%60):'0'+parseInt(total%60)}`
    }
    ,
    changeplay(){

      this.$store.commit('changepaused',!this.paused)

      // console.log('cahngeplay');

    },
    playersong(id){

      // console.log('playn small music');
      this.song=id


    }
  },
  mounted(){
      
      // 获取歌曲详情
      this.song=this.$store.state.songid

      let url=`/song/detail?ids=${this.song}`

         get(url).then(respnse=>{
  
          //  console.log(respnse);

           this.songdetail=respnse?.data?.songs[0]?.al

           this.creatordetail=respnse?.data?.songs[0]?.alia

          //  console.log(this.songdetail);

         }).catch(e=>{})
    
  },
  updated(){

      // dom更新时触发总时长更新 
      this.$nextTick(()=>{
        setTimeout(() => {
            this.$store.commit('changeduration',this.$refs.audio.duration)
        // console.log(this.$store.state.duration,this.$refs.audio.duration);

          let url=`/song/detail?ids=${this.songid}`

         get(url).then(respnse=>{
  
          //  console.log(respnse);

           this.songdetail=respnse?.data?.songs[0]?.al

           this.creatordetail=respnse?.data?.songs[0]?.alia

          //  console.log(this.songdetail);

         }).catch(e=>{})
          
        }, 2000);
      

      })

      
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  
}

nav {
  padding: 30rem;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

*{

  padding: 0;
  margin: 0;

}
*::-webkit-scrollbar{
    display: none;
}
.namebottom{
  
  span{
    font-size: 1rem;
  }
}
    .parent {
    position: relative;
    top: 0;
    left: 0;
    height: calc(100vh - 126rem);
    overflow-y: auto;
    overflow-x: hidden;
    .dingwei {
    position: absolute;
    top: 0;
    left: 0;
 }
}

.palybottom{
   position: fixed;
   width: 690rem;
   height: 90rem;
   border-radius: 90rem;
  //  background-color: #cd0014;
   
  //  background-color: #f4f4f4;
   display: flex;
   justify-content: space-between;
   align-items: center;
   bottom: 160rem;
   z-index: 999;
   margin: 0 auto;
   margin-left: 30rem;
   background-color: rgba(92, 92, 92, 0.9);
   @keyframes xuanzhuang {
     0%{
       transform: rotate(0deg);
     }
     100%{
       transform: rotate(360deg);
     }
     
   }
   .songimg{
    //  position: absolute;
    animation:xuanzhuang 5s infinite  linear;
   
     background-image: url(./assets/img/cangpian.png);
     background-size: contain;
    //  margin-left: 15rem;
    //  top: -5rem;
     width: 90rem;
     height: 90rem;
     border-radius: 44rem;
     display: flex;
     justify-content: center;
     align-items: center;
     animation-play-state:paused;
    //  opacity: 0.6; .paused{
      
      &.paused{
        animation-play-state:paused;

      }
       &.running{
        animation-play-state:running;

      }
    
    
     img{
      width: 30rem;
      height: 30rem;
      

     }
   }
   .songname{
    
     display: flex;
     justify-content: start;
     flex-direction: column;
     .nametop{
    
     }

     
     span{
       width: 60%;
       
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;


       font-size: 30rem;
       color:#fdf1ec;
       

     }
     strong{
       width: 60%;
        overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 30rem;
       color: #ccc;
      
     }
   }
   .play{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-right: 35rem;
      .playfun{
     margin-right: 15rem;
     span{
       color: #fff;
       font-size: 35rem;
     }
   }
   span{
     margin-right: 10rem;
     font-size: 35rem;
     color: #fff;
   }

   }
  

}






</style>

